<template>
    <view-box style="background:#F3F6F7;">
      <div v-if="data === null" class="cpopp">没有公司信息</div>
      <div class="backgr-border-co" v-if="data !== null">
        <div class="width-backa">
          <div class="posik-width">
            <img :src="$apiUrl + '/storage/' + data.logo" alt="">
          </div>
          <div class="posik-width1">
            <p style="font-size:16px;font-weight: 600;width:100%;">{{data.cname}}</p>
            <p style="font-size:13px;color:#32B6C6;width:100%;">{{data.city}} | {{data.renshu}} | {{data.hangye}}</p>
          </div>
        </div>
        <div class="width-lkojh">
          <p style="font-size:13px;color:#bababa;">公司行业：{{data.xingzhi}}</p>
        </div>
      </div>
      <div style="height:20px;"></div>
      <div class="backgroun-width" v-if="data !== null">
        <tab :line-width="2" class="oungh">
          <tab-item :selected="category === 2" @on-item-click="onItemClick(2)">在招职位</tab-item>
          <tab-item :selected="category === 3" @on-item-click="onItemClick(3)">基本信息</tab-item>
        </tab>
        <div class="back-zhiwei" v-if="indexlass === 2">
          <div class="zhiwei-width" v-for="(item, index) in position" :key="index">
            <div class="widt-zhiwei">
              <p style="width:100%;font-size:14px;font-weight: 600;">{{item.position_name}}</p>
              <p style="width:100%;font-size:13px;color:#bababa;">{{item.city}} | {{item.age_limit}} | {{item.nature}}</p>
            </div>
            <div class="widt-zhiwei1">
              <p style="width:100%;font-size:14px;color:#32B6C6;">{{item.pay}}</p>
              <p style="width:100%;font-size:13px;color:#bababa;">{{item.updated_at}}</p>
            </div>
          </div>
        </div>
        <div class="" v-if="indexlass === 3">
          <div class="bakcl-jianji">
            <p style="height:40px;font-size:16px;font-weight: 600;">简介</p>
            <p style="font-size:14px;color:#575757;">
              {{data.jianjie}}
            </p>
          </div>
          <div class="backgr-dizhi">
            <p style="height:40px;font-size:16px;font-weight: 600;line-height:40px;">地址</p>
            <p style="font-size:14px;color:#575757;">
              {{data.province}}{{data.city}}{{data.area}}{{data.detailed_address}}
            </p>
          </div>
          <div class="backgr-dizhi" v-if="data.image !== null">
            <p style="height:40px;font-size:16px;font-weight: 600;line-height:40px;">企业风采</p>
            <div class="img-qyfc">
              <div class="width-up-images" v-for="(item, index) in data.image" :key="index">
                <img class="imga-imgses" :src="$apiUrl + '/storage/' + item" alt="">
              </div>
            </div>
          </div>

          <div class="backgr-dizhi" v-if="data.video !== null">
            <p style="height:40px;font-size:16px;font-weight: 600;line-height:40px;">企业视频</p>
            <div class="pooswid-dio-qbu">
                <video :src="$apiUrl + data.video"  width="100%" height="240" controls="controls">
                    Your browser does not support the video tag.
                </video>
            </div>
          </div>
          <div class="backgr-dizhi" v-if="data.music !== null">
            <p style="height:40px;font-size:16px;font-weight: 600;line-height:40px;">企业音频</p>
            <div class="pooswid-dio-qbu">
                <audio :src="$apiUrl + data.music" controls="controls" style="width:100%;">
                </audio>
            </div>
          </div>
        </div>
      </div>
    </view-box>
</template>
<script>
import { ViewBox, Box, Flexbox, FlexboxItem, Group, Cell, CellBox, XHeader, CheckIcon, XTextarea, XInput, XAddress, ChinaAddressData, XButton, TabItem, Tab } from 'vux'
export default {
  components: {
    ViewBox,
    Box,
    Flexbox,
    Group,
    Cell,
    CellBox,
    FlexboxItem,
    XHeader,
    CheckIcon,
    XTextarea,
    XInput,
    XAddress,
    XButton,
    TabItem,
    Tab
  },
  data () {
    return {
      labelPosition: false,
      addressData: ChinaAddressData,
      labelPosition1: false,
      addressValue: [],
      position: {},
      category: 2,
      indexlass: 2,
      addBasic: {
        cname: '',
        hangye: '',
        renshu: ''
      },
      show1: false,
      show2: true,
      data: {},
      company_image: ''
    }
  },
  mounted () {
    if (!this.$store.state.auth.userInfo) {
      this.$store.dispatch('getUserInfo')
    }
    this.myPrivac()
  },
  computed: {
    userInfo () {
      return this.$store.getters.userInfo
    }
  },
  methods: {
    onItemClick (plid) {
      console.log(plid)
      this.indexlass = plid
    },
    cameraChange (event) {
      var file = event.target.files[0]
      var formdata1 = new FormData()
      formdata1.append('file', file, file.name)
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      if (file) {
        this.$vux.loading.show()
      }
      this.$http.post(
      '/upload/image',
      formdata1,
      config
      )
      .then(response => {
        // this.upload(response.data.thumb_img)
        this.company_image = response.data.thumb_img
        this.$vux.loading.hide()
      })
      .catch(e => {
        this.$vux.loading.hide()
      })
    },
    myPrivac () {
      console.log(this.userInfo.id)
      this.$http.get('/lookOthersInfo/?uid=' + this.userInfo.id + '&identity=' + '2').then(response => {
        this.data = response.data.info.company_info
        this.position = response.data.info.position
      }).catch(error => {
        console.log(error)
      })
    },
    save () {
      if (this.addBasic.cname === '') {
        this.$vux.toast.show({
          text: '不能为空',
          type: 'text'
        })
        return false
      }
      if (this.addBasic.hangye === '') {
        this.$vux.toast.show({
          text: '不能为空',
          type: 'text'
        })
        return false
      }
      if (this.addBasic.renshu === '') {
        this.$vux.toast.show({
          text: '不能为空',
          type: 'text'
        })
        return false
      }
      let data = {
        uid: this.userInfo.id,
        logo: this.company_image,
        cname: this.addBasic.cname,
        hangye: this.addBasic.hangye,
        renshu: this.addBasic.renshu,
        xingzhi: this.addBasic.xingzhi,
        jianjie: this.addBasic.jianjie,
        province: this.addiss.province,
        city: this.addiss.city,
        area: this.addiss.area,
        detailed_address: this.addBasic.detailed_address
      }
      this.$http.post('/companyInfo/store', data).then(response => {
        this.$vux.toast.show({
          text: response.data.message,
          type: 'text'
        })
        this.$router.push({ path: '/corporate' })
        this.myPrivac()
      }).catch(error => {
        console.log(error)
      })
    },
    updata () {
      let data = {
        id: this.data.id,
        logo: this.company_image,
        cname: this.data.cname,
        hangye: this.data.hangye,
        renshu: this.data.renshu,
        xingzhi: this.data.xingzhi,
        jianjie: this.data.jianjie,
        province: this.addiss.province,
        city: this.addiss.city,
        area: this.addiss.area,
        detailed_address: this.data.detailed_address
      }
      this.$http.put('/companyInfo/update', data).then(response => {
        this.$vux.toast.show({
          text: response.data.message,
          type: 'text'
        })
        this.show1 = false
        this.show2 = true
      }).catch(error => {
        console.log(error)
      })
    },
    pudata () {
      this.show1 = true
      this.show2 = false
    },
    onShadowChange (ids, names) {
      this.addiss = {
        province: names[0],
        city: names[1],
        area: names[2]
      }
    }
  }
}
</script>
<style scoped>
.backgr-border-co{
  width: 100%;
  background: #fff;
}
.width-backa{
  width: 92%;
  margin-left: 4%;
  border-bottom: 1px solid #f4f4f4;
  display: flex;
  padding-top: 15px;
}
.posik-width{
  width: 20%;
}
.posik-width img{
  width: 60px;
  height: 60px;
  border-radius: 100%;
}
.posik-width1{
  width: 75%;
  display: flex;
  flex-wrap: wrap;
}
.width-lkojh{
  width: 92%;
  margin-left: 4%;
  height: 40px;
  line-height: 40px;
}
.backgroun-width{
  width: 100%;
  background: #fff;
}
.back-zhiwei{
  width: 92%;
  margin-left: 4%;
}
.zhiwei-width{
  width: 100%;
  border-bottom:1px solid #f4f4f4;
  padding-bottom: 15px;
  padding-top: 15px;
  display: flex;
}
.widt-zhiwei{
  width: 50%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.widt-zhiwei1{
  width: 50%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  text-align: right;
}
.bakcl-jianji{
width: 92%;
margin-left: 4%;
border-bottom: 1px solid #f4f4f4;
}
.backgr-dizhi{
width: 92%;
margin-left: 4%;
border-bottom: 1px solid #f4f4f4;

}
.width-up-images{
    width: 18%;
    margin-left: 2%;
    margin-top: 10px;
    position: relative;
}
.imga-imgses{
    width: 100%;
    border-radius: 8px;
}
.img-qyfc{
  width: 100%;
  margin-left: 0%;
  display: flex;
  flex-wrap: wrap;
}
.pooswid-dio-qbu{
    width: 100%;
    margin-top: 10px;
}
.pooswid-dio-qbu img{
    width: 100%;
    border-radius: 8px;
    height: auto;
}
.cpopp{
  height: 100px;
  line-height: 100px;
  width: 100%;
  text-align: center;
  color: #bababa;
}
</style>
<style>
    .vux-label{
        font-size: 16px !important;
    }
    .weui-cell__ft{
        font-size: 0.14rem;
    }
    .weui-cell_access {
    font-size: 16px !important;
}
    .weui-cell_access{font-size: 0.17rem;}
     .weui-cells:before{
        border-top: 0px solid #D9D9D9 !important;
    }
   .opiu-cong .weui-cells__title {
    margin-top: 0.77em;
    margin-bottom: 0.3em;
    padding-left: 15px;
    padding-right: 15px;
    color: #000!important;
    font-size: 16px!important;
}
    .weui-cells:after{
        border-bottom: 0px solid #D9D9D9 !important;
    }
    .oungh .vux-tab .vux-tab-item.vux-tab-selected {
    color: #32B6C6;
    border-bottom: 1px solid #32B6C6!important;
}
.oungh .vux-tab-ink-bar {
    background:0!important;
}
</style>